<template>
  <div class="body">
    <div class="bodyleft">
      <div class="map">
        <bv-flyline-chart
          :config="config"
          style="width: 100%; height: 100%"
          @click="onClick"
        ></bv-flyline-chart>
      </div>
      <div class="daibiao">
        <div class="bdtit">代表队</div>
        <bv-scroll-table :config="configdb" style="width: 100%; height: 100%"></bv-scroll-table>
      </div>
    </div>

    <!-- 中间 -->
    <div class="bodycenter">
      <bv-decorator
        class="wtitle"
        name="decorator11"
        style="width: 200px; height: 50px; color: #8dd3ef"
        >作品列表
      </bv-decorator>
      <div class="worklist">
        <div class="workson" v-for="(item, i) in worklist" :key="i">
          <img :src="item.img" alt="" />
          <div class="worksonname">{{ item.tit }}</div>
        </div>
      </div>

      <bv-decorator
        class="wtitle"
        name="decorator11"
        style="width: 200px; height: 50px; color: #8dd3ef"
        >选手姓名
      </bv-decorator>
      <div class="playlist">
        <div class="playson" v-for="(item, i) in playlist" :key="i">
          <div class="playname">{{ item.name }}</div>
          <bv-decorator name="decorator2" :dur="2" style="width: 100%; height: 5px"></bv-decorator>
          <div class="place">{{ item.tit }}</div>
        </div>
      </div>

      <bv-decorator
        class="wtitle"
        name="decorator11"
        style="width: 200px; height: 50px; color: #8dd3ef"
        >组别
      </bv-decorator>
      <div class="piebox">
        <div class="pieone">
          <pie></pie>
        </div>
      </div>
    </div>
    <!-- 中间 -->

    <div class="bodyright">
      <bv-decorator
        class="wtitle"
        name="decorator11"
        style="width: 200px; height: 50px; color: #8dd3ef"
        >选手序号
      </bv-decorator>
      <div class="brlist">
        <div id="myonechart" style="width: 100%; height: 100%"></div>
      </div>

      <bv-decorator
        class="wtitle"
        name="decorator11"
        style="width: 200px; height: 50px; color: #8dd3ef"
        >奖项获得
      </bv-decorator>
      <div class="awaids">
        <bv-scroll-rank :config="configaw" style="width: 100%; height: 100%"></bv-scroll-rank>
      </div>

      <div class="endimg">
        <img src="@/assets/images/tu2.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import pie from '@/components/pie.vue'
import mapimg from '@/assets/images/Map.png'
import oneimg from '@/assets/images/one.png'
import twoimg from '@/assets/images/two.png'
import threeimg from '@/assets/images/three.png'
import fourimg from '@/assets/images/four.png'

// 地图
let config = {
  bgImgSrc: import.meta.resolve(mapimg),
  points: [
    {
      name: '青岛',
      coordinate: [0.68, 0.4],
      halo: {
        show: true
      },
      icon: {
        src: 'https://wangbin3162.gitee.io/bin-files/other/mapPoint.png',
        width: 30,
        height: 30
      }
    },
    {
      name: '临沂',
      coordinate: [0.44, 0.66],
      halo: {
        show: true,
        color: '#8378ea'
      }
    },
    {
      name: '烟台',
      coordinate: [0.76, 0.25],
      halo: {
        show: true,
        color: '#8378ea'
      }
    },
    {
      name: '菏泽',
      coordinate: [0.11, 0.7],
      halo: {
        show: true,
        color: '#fff'
      }
    },
    { name: '泰安', coordinate: [0.31, 0.5] },
    {
      name: '济南',
      coordinate: [0.3, 0.34],
      halo: {
        show: true,
        color: '#37a2da'
      }
    }
  ],
  lines: [
    { source: '青岛', target: '临沂', color: '#fb7293', width: 10 },
    { source: '青岛', target: '济南', color: '#fb7293', width: 2 },
    { source: '临沂', target: '泰安', color: '#8378ea' },
    { source: '菏泽', target: '烟台', color: '#8378ea', width: 2 }
  ],
  icon: {
    show: true,
    src: 'https://wangbin3162.gitee.io/bin-files/other/mapPoint.png'
  },
  text: {
    show: true
  }
}

const onClick = (params) => {
  console.log(params)
}
// 地图

// 代表表格
let configdb = {
  rowNum: 6,
  oddRowBGC: '#17304f',
  evenRowBGC: '#2760a8',
  align: 'right',
  data: [
    ['浙江代表队', '沈阳代表队', '中国代表队'],
    ['', '', ''],
    ['浙江代表队', '沈阳代表队', '中国代表队'],
    ['', '', ''],
    ['浙江代表队', '沈阳代表队', '中国代表队'],
    ['', '', '']
  ]
}
// 代表表格

// 中间
const worklist = ref([
  {
    tit: '甩手舞',
    img: oneimg
  },
  {
    tit: '震撼舞',
    img: twoimg
  },
  {
    tit: '电流舞',
    img: threeimg
  },
  {
    tit: '机械舞',
    img: fourimg
  }
])

const playlist = ref([
  {
    name: '刘萌萌',
    tit: '绿景舞蹈公司'
  },
  {
    name: '李健',
    tit: '绿梦舞蹈公司'
  },
  {
    name: '王梦',
    tit: '新秀舞蹈公司'
  },
  {
    name: '王圆圆',
    tit: '爱吾舞蹈公司'
  }
])

//饼状图

//饼状图
// 中间
onMounted(() => {
  var chartDom = document.getElementById('myonechart')
  var myChart = echarts.init(chartDom)

  myChart.setOption(option)
})
// 右侧
const data = []
for (let i = 0; i < 5; ++i) {
  data.push(Math.round(Math.random() * 200))
}

let option = {
  xAxis: {
    max: 'dataMax'
  },
  yAxis: {
    type: 'category',
    data: ['刘萌萌', '王圆圆', '刘晓佳', '张茜茜', '王怀泳'],
    inverse: true,
    animationDuration: 300,
    animationDurationUpdate: 300,
    max: 2 // only the largest 3 bars will be displayed
  },
  series: [
    {
      realtimeSort: true,
      name: '序号',
      type: 'bar',
      data: data,
      label: {
        show: true,
        position: 'right',
        valueAnimation: true
      }
    }
  ],
  legend: {
    show: true
  },
  animationDuration: 0,
  animationDurationUpdate: 3000,
  animationEasing: 'linear',
  animationEasingUpdate: 'linear'
}
const run = () => {
  for (var i = 0; i < data.length; ++i) {
    if (Math.random() > 0.9) {
      data[i] += Math.round(Math.random() * 2000)
    } else {
      data[i] += Math.round(Math.random() * 200)
    }
  }
  myChart.setOption({
    series: [
      {
        type: 'bar',
        data
      }
    ]
  })
}
setTimeout(function () {
  run()
}, 0)
setInterval(function () {
  run()
}, 1000)

//奖项获得
const configaw = {
  data: [
    { name: '刘萌萌', value: 167 },
    { name: '李健', value: 123 },
    { name: '王梦', value: 98 },
    { name: '王圆圆', value: 89 },
    { name: '张茜茜', value: 68 },
    { name: '王怀泳', value: 58 }
  ]
}
//奖项获得
// 右侧
</script>

<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
}

// 左侧
.map {
  width: 781px;
  height: 562px;
  margin-top: 10px;
  margin-left: 20px;
}

.daibiao {
  width: 781px;
  height: 300px;
  margin-left: 20px;
  background-color: aqua;

  .bdtit {
    width: 100%;
    height: 50px;
    background-color: #17304f;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    color: white;
  }
}

// 左侧
// 中间
.bodycenter {
  width: 510px;
  height: 80%;
  margin-top: 30px;
  border-radius: 8px;
  //透明背景
  background-color: rgba(0, 0, 0, 0.2);
  border: solid 1px #4c546b;

  .worklist {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 16px;
    padding: 4px 50px;
    box-sizing: border-box;

    .workson {
      width: 44%;
      text-align: center;
      color: white;

      img {
        width: 100%;
        height: 100px;
      }

      .worksonname {
        margin: 4px 0;
      }
    }
  }

  .playlist {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 16px;
    padding: 4px 50px;
    box-sizing: border-box;

    .playson {
      width: 44%;
      height: 80px;
      background-color: rgba(12, 30, 54, 0.6);
      margin-bottom: 16px;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 18px;
      font-family: '楷体';
      border: solid #4c586c 1px;

      .playname {
        margin-bottom: 4px;
        color: #95b0cb;
      }

      .place {
        margin-top: 4px;
        color: #4989a8;
      }
    }
  }

  .piebox {
    .pieone {
      img {
        width: 200px;
        height: 100px;
      }
    }
  }
}

// 中间
.wtitle {
  margin-left: 20px;
}

// 右侧
.bodyright {
  width: 510px;
  height: 80%;
  margin-top: 30px;
  border-radius: 8px;
  //透明背景
  background-color: rgba(0, 0, 0, 0.2);
  border: solid 1px #4c546b;

  .brlist {
    width: 100%;
    height: 300px;
  }

  .awaids {
    padding: 0 30px;
    box-sizing: border-box;
    width: 100%;
    height: 240px;
  }
}

.endimg {
  margin-top: 10px;
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 30px;
  box-sizing: border-box;

  img {
    width: 100%;
    height: 100%;
  }
}

// 右侧
</style>
